<template>
  <div class="page-container">
    <div class="content-wrapper">
      <!-- 左侧导航 -->
      <div class="nav-sidebar">
        <div 
          v-for="item in navItems" 
          :key="item.key"
          class="nav-item"
          :class="{ active: currentNav === item.key }"
          @click="switchNav(item.key)"
        >
          {{ item.label }}
        </div>
      </div>
      
      <!-- 右侧内容区 -->
      <div class="main-content">
        <SignIn v-if="currentNav === 'signin'" @switch-nav="switchNav" />
        <Register v-if="currentNav === 'register'" />
        <ReturnCenter v-if="currentNav === 'return' || showReturnContent" /> 
        <OrderStatus v-if="currentNav === 'order' || showOrderContent" />
        <Forgot v-if="currentNav === 'forgot'" @switch-nav="switchNav" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineAsyncComponent,onMounted } from 'vue'
import { useRoute } from 'vue-router';

// 在组件中
const route = useRoute();
// 使用异步组件
const SignIn = defineAsyncComponent(() => import('./components/SignIn.vue'))
const Register = defineAsyncComponent(() => import('./components/Register.vue'))
const OrderStatus = defineAsyncComponent(() => import('./components/OrderStatus.vue'))
const ReturnCenter = defineAsyncComponent(() => import('./components/ReturnCenter.vue'))
const Forgot = defineAsyncComponent(() => import('./components/Forgot.vue'))
const navItems = [
  { key: 'signin', label: 'Sign in' },
  { key: 'register', label: 'Register' },
  { key: 'order', label: 'Order status' },
  { key: 'return', label: 'Return center' }
]
const currentNav = ref('signin')
const showReturnContent = ref(false)
const showOrderContent = ref(false)

// 明确定义导航切换函数，添加类型
function switchNav(key: string): void {
  // 重置额外内容显示标志
  showReturnContent.value = false
  showOrderContent.value = false
  // 设置当前导航
  currentNav.value = key
  // 如果导航选的是return，则同时显示return和order内容
  if(key === 'return') {
    showOrderContent.value = true
  }
}
onMounted(() => {
  // 检查URL中是否有tab参数，如果有且值为register，则显示注册选项卡
  if (route.query.tab === 'register') {
    currentNav.value = 'register';
  }else if (route.query.tab === 'order') {
    currentNav.value = 'order';
  } else if (route.query.tab === 'return') {
    currentNav.value = 'return';
    showOrderContent.value = true
  }
});
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: #fff;
}

.content-wrapper {
  width: 1200px;
  display: flex;
  gap: 80px;
}

.nav-sidebar {
  width: 300px;
  border-right: 1px solid #e3e3e3;
}

.nav-item {
  padding: 12px 20px;
  cursor: pointer;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: #f5f5f5;
}

.nav-item.active {
  background-color: #f0f0f0;
  border-left: 3px solid #333;
}

.main-content {
  flex: 0.5;
  padding: 20px;
}

h1 {
  font-size: 24px;
  margin-bottom: 16px;
}

/* 响应式布局 - 屏幕宽度小于1200px */
@media (max-width: 1199px) {
  .content-wrapper {
    width: 100%;
    flex-direction: column;
    gap: 20px;
  }
  
  .nav-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    overflow-x: auto;
  }
  
  .nav-item {
    white-space: nowrap;
    padding: 10px 15px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .nav-item.active {
    border-left: none;
    border-bottom: 3px solid #333;
  }
  
  .main-content {
    width: 100%;
    padding: 15px 0;
  }
}
</style> 